import { defineApiDescription } from "~/modules/page-config/runtime";

export default defineApiDescription({
  props: {
    columns: "The property `columns` must be an array, that configures the columns of the table",
    items: "Array of objects with table data (`DataTableItem` type). The `va-data-table` automatically calculates the amount and the titles of columns (if not specified otherwise with the `columns` prop) based on these object's keys. When calculating the columns' names based on the item's objects' keys `va-data-table` uses [Lodash's startCase](https://lodash.com/docs/4.17.15#startCase)[[target=_blank]] internally. Faulty values are replaced with an empty string",
    itemsTrackBy: "The `item` key that is used to keep track of the selected `item`. Can be string (path to the key) or a function of type: `(item) => item.track`",
    filter: "If a `filter` is provided, only rows in which at least one cell contains the specified value will be displayed. To disable filtering at runtime (clear `filter`), specify an empty string",
    filterMethod: "A custom filtering function that enhances the data table's filtering capabilities. This function receives two parameters: the initial value of the currently checked cell (source) and the cell object itself. It should return a boolean value indicating whether to include the row containing this cell. This approach allows for more sophisticated and context-aware filtering logic.",
    sortBy: "Sets the column to sort by. Works through the `v-model`",
    sortingOrder: "Sets the sorting order. Works through the `v-model`",
    sortingOptions: "An array from a set of values (`'asc'`, `'desc'`, `null`) that specifies the order and allowed sort directions.",
    selectable: "Sets whether the `va-data-table` should have selectable rows or not",
    grid: "Enables grid view for the component",
    gridColumns: "Sets the amount of columns for grid view. By default is ruled by adaptive CSS variables.",
    clickable: "Sets whether the `va-data-table` should have clickable (the click events will be emitted) rows or not",
    selectMode: "Sets the select mode. `'single'` selection allows for only a single row to be selected at a time, while `'multiple'` mode allows to select multiple rows by clicking on checkboxes or using the **ctrl**/**shift** keys when clicking rows",
    selectedColor: "Sets the highlighting color of the selected row",
    perPage: "Sets the maximum number of rows displayed in the table's `tbody`",
    currentPage: "Sets the number of the current table page",
    loading: "Sets the loading state for the table (by displaying the spinning loading-indicator)",
    loadingColor: "Sets the color of the spinning loading-indicator",
    noDataHtml: "Sets html-content for cases where there are no items passed in the `items` option at all",
    noDataFilteredHtml: "Sets html-content for cases where there are no items found when filtering the table using the `filter` prop",
    hideDefaultHeader: "Sets whether to show the default headers for columns",
    footerClone: "Sets whether to clone the `thead` columns into the `tfoot`. Has no effect if the default `thead` is hidden with the `hide-default-header` prop",
    allowFooterSorting: "Allows clicks on `tfoot` column headers to sort (and to display the sorting status) the rows",
    striped: "Sets the striped style to the `tbody` rows (highlights each 2nd row)",
    hoverable: "Allows the hover state on table rows within a `tbody`. The highlighting color of the hover state takes from `selected-color` prop",
    animated: "Sets css `transition` to table rows",
    stickyHeader: "Enables sticky header (sticky header is achieved through CSS with `position: sticky` for `thead`)",
    stickyFooter: "Enables sticky footer (sticky footer is achieved through CSS with `position: sticky` for `tfoot`)",
    height: "Sets the height to the table and enables scrolling",
    rowBind: "Adds attributes to a table row using `v-bind`. This can be an object type (with attributes that vue supports) or a function that returns such an object. The function receives a table row element (`DataTableItem` type) and an index as arguments",
    bench: "Amount of rows will be rendered before and after visible part of the table (for smooth scrolling). Suitable only for the state with the virtual scrolling enabled.",
    itemSize: "Average size (width or height) of the row (can be number or string with \"px\"/\"rem\" value). Suitable only for the state with the virtual scrolling enabled.",
    virtualScroller: "Enables virtual scrolling for `tbody` rows.",
    virtualTrackBy: "Property name for row identifying. Suitable only for the state with the virtual scrolling enabled.",
    wrapperSize: "Size (width or height) of the component's viewport (can be number or string with \"px\"/\"rem\" value). Suitable only for the state with the virtual scrolling enabled.",
    cellBind: "Adds attributes to a table cell using `v-bind`. This can be an object type (with attributes that vue supports) or a function that returns such an object. As arguments, the function receives a table cell element (`any` type), a row (`DataTableItem` type), a column (`TableColumn` type), and a row index",
    scrollTopMargin: "Sets the threshold (`px`) for scrolling up when the `scroll:top` event is enabled.",
    scrollBottomMargin: "Sets the threshold (`px`) for scrolling down when the `scroll:bottom` event is enabled."
  },
  events: {
    updateSortBy: "Emits when `sort-by` changed",
    updateSortingOrder: "Emits when `sorting-order` changed",
    columnSorted: "Emits when sort is clicked. Returns all column data, the column name, and the sort direction",
    filtered: "`va-data-table` emits the `filtered` event each time filtering is applied (and when the filter is cleared)",
    sorted: "Each time the table's sorting changes, the `sorted` event is thrown",
    rowClick: "When row clicked the event is thrown",
    rowDblclick: "Double-clicking a row raises an event",
    rowContextmenu: "When the context menu is clicked on a row, an event is raised",
    selectionChange: "The `selectionChange` event is thrown each time the selection changes",
    scrollBottom: "Emits when table scroll down reaches `scrollBottomMargin`.",
    scrollTop: "Emits when table scroll top reaches `scrollTopMargin`."
  },
  slots: {
    colgroup: "The contents of this slot is wrapped (if provided) inside the `colgroup` tag, allowing to specify certain column options. Bound to columns (not the prop, but their internal representation)",
    headerPrepend: "Prepends custom rows in table header (`thead`). Isn't bound to anything",
    header: "Targets all the table headings. Is bound to columns (to their internal representation)",
    headerKey: "Targets a specific table header by the column's `key`. Is bound to column",
    headerAppend: "Appends custom rows inside table header (`thead`)",
    bodyPrepend: "Prepends `tbody` with custom rows",
    cell: "Targets all the cells. Is bound to the current cell (to it internal representation)",
    expandableRow: "Targets all the row. Adds an expandable row underneath. To trigger expansion use `row.toggleRowDetails`",
    cellKey: "Allows to target only cells of a specified by the given `key` column. Is bound to the current cell",
    bodyAppend: "Appends rows to the table's `tbody`",
    footerPrepend: "Prepends rows to the table's `tfoot`",
    footer: "Targets all the headers inside `tfoot`. Works if there's a `footer-clone` prop set to `true`",
    footerKey: "A specific header in `tfoot`. Is bound to the column (to it internal representation) with the given `key`. Works if there's a `footer-clone` prop set to `true`",
    footerAppend: "Appends rows to the `tfoot`"
  }
});
